<template>
  <div>
    <div class="input_field" @click="rechargeSearch">目标查询(下拉重置)</div>
        <ul class="list_box">
          <li class="list_item" 
            v-for="(item, index) in list" 
            :key="index"
            @click="detailClick(index)">
            <div class="list_time_icon">
              <div class="list_time">
                <span>{{ item.logtime | fnMonthDate}}</span>
                <span>{{ item.logtime | fnTimeDate}}</span>
              </div>
              <div>
                <img
                  v-if="item.game_type === '1'"
                  src="../../../assets/img/page/ic_game_bt.png"
                  alt=""
                />
                <img
                  v-else-if="item.game_type === '2'"
                  src="../../../assets/img/page/ic_game_discount.png"
                  alt=""
                />
                <img
                  v-else-if="item.game_type === '3'"
                  src="../../../assets/img/page/ic_game_h5.png"
                  alt=""
                />
              </div>
            </div>
            <div class="list_info">
              <span>{{ item.username }}</span>
              <span>{{ item.gamename }}</span>
            </div>
            <div class="list_amount">
              <span>实付：{{ item.rmb_total }}</span>
              <span>提成：{{ item.cps_fee }}</span>
            </div>
          </li>
        </ul>
  </div>
</template>

<script>
import jutils from 'jutils-src'
export default {
  props: {
    list: {
      type: Array,
      default: null
    },
  },
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
    };
  },
  methods: {
    detailClick(index) {
      this.$router.push({
        path: '/recharge_item',
        query: {
          gameinfo: this.list[index]
        }
      })
    },
    rechargeSearch() {
      this.$emit('recharge-search')
    }
  },
  filters: {
    fnMonthDate: function(date) {
      // YYYY-MM-DD HH:ii:ss
      return jutils.formatDate(new Date(date*1000),"MM-DD")
    },
    fnTimeDate: function(date) {
      // YYYY-MM-DD HH:ii:ss
      return jutils.formatDate(new Date(date*1000),"HH:ii")
    }
  }
};
</script>

<style scoped>
.input_field {
  position: relative;
  width: 670px;
  height: 64px;
  margin: 20px 40px;
  border-radius: 32px;
  font-weight: 500;
  border: 1px solid #c3c3c3;
  color: #888;
  font-size: 24px;
  line-height: 64px;
  padding: 0;
  text-indent: 100px;
}

.input_field::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 30px;
  width: 30px;
  height: 30px;
  background: url("../../../assets/img/page/ic_data_search.png") no-repeat;
  background-size: 100%;
}

.list_box {
  width: 670px;
  padding: 0 40px 20px;
}

.list_item {
  border-bottom: 1px solid #f2f2f2;
  height: 78px;
  padding: 32px 0;
  display: flex;
}

.list_time_icon {
  flex-shrink: 1;
  display: flex;
}

.list_time {
  width: 60px;
  height: 78px;
  margin-right: 10px;
  color: #888;
}

.list_time span {
  display: block;
  line-height: 39px;
}

.list_time_icon img {
  width: 78px;
  height: 78px;
}

.list_info {
  flex-grow: 1;
  height: 78px;
  padding-left: 22px;
}

.list_info span {
  display: block;
  line-height: 39px;
}

.list_info span:first-child {
  color: #000;
  font-size: 30px;
}

.list_info span:last-child {
  width: 360px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #8e8e8e;
  font-size: 24px;
}

.list_amount {
  flex-shrink: 1;
  height: 78px;
}

.list_amount span {
  display: block;
  line-height: 39px;
  text-align: right;
}

.list_amount span:first-child {
  color: #000;
  font-size: 26px;
}

.list_amount span:last-child {
  color: #ff0000;
  font-size: 22px;
}
</style>